<template>
	<view class="template-build tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
		  <view slot="back" class='tn-custom-nav-bar__back'>
			<text class='icon tn-icon-left' @tap="goBack"></text>
			<text class='icon tn-icon-home-capsule-fill' @tap="backIndex"></text>
		  </view>
		</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="justify-content-item tn-margin tn-text-bold tn-text-xl" style="color: red;">上传个人身份证</view>
			<view class="about-shadow" style="margin: 20rpx;">
				<Rboy-upload-sfz 
					:folder="'member/sfz/' + formData.businessId"
					:obverse-url="formData.idCardZm" 
					:reverse-url="formData.idCardFm" 
					@selectChange="sfz_chagne" 
					@del="del_btn"></Rboy-upload-sfz>
			</view>

			<view class="about-shadow" style="margin: 20rpx;">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view style="color: red;">*</view>
						<view class="tn-margin-left-sm tn-flex-1">姓名</view>
						<view><input v-model="formData.name" placeholder="请输入姓名" placeholder-style="color:#AAAAAA"
								style="text-align: right;"></input></view>
					</view>
				</tn-list-cell>
				<div class="tableTitle"></div>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view style="color: red;">*</view>
						<view class="tn-margin-left-sm tn-flex-1">身份证号</view>
						<view><input v-model="formData.idCard" placeholder="请输入身份证号" placeholder-style="color:#AAAAAA"
								style="text-align: right;"></input></view>
					</view>
				</tn-list-cell>
			</view>

			<view class="about-shadow" style="margin: 20rpx;">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view style="color: red;">*</view>
						<view class="tn-margin-left-sm tn-flex-1">收款方式</view>
						<view>
							<picker :value="pickerIndex" :range="pickerArray">
								<view class="uni-input">{{pickerArray[pickerIndex]}}</view>
							</picker>
						</view>
					</view>
				</tn-list-cell>
				<div class="tableTitle"></div>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view style="color: red;">*</view>
						<view class="tn-margin-left-sm tn-flex-1">本人收款账户</view>
						<view><input v-model="formData.bankCardAccount" placeholder="请输入本人收款账户" placeholder-style="color:#AAAAAA"
								style="text-align: right;"></input></view>
					</view>
				</tn-list-cell>
			</view>
			
			<view style="margin: 10px;">
				<checkbox :checked="agreement" color="#0081FF" @click="changeAgreement" style="transform:scale(0.7)" />
				　我已阅读并同意<span style="color: #0081FF;" @click="tn('/signingPages/privacyAgreement')">《用户服务协议和隐私政策》</span>
			</view>
		</view>

		<!-- 悬浮按钮-->
		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="confirmAgreement()">
				<tn-button shape="round" backgroundColor="#ff3d57" padding="40rpx 0" width="70%" shadow fontBold>
					<text class="tn-color-white" style="font-size: 16px;">同意签约</text>
				</tn-button>
			</view>
		</view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	
	export default {
		name: 'TemplateBuild',
		mixins: [template_page_mixin],
		components: {
			RboyUploadSfz,
		},
		data() {
			return {
				formData: {
					//id: '',
					phone: '',
					companyId: '',
					//companyName: '',
					//companyCode: '',
					businessId: '',
					//businessName: '',
					tenantId: '',
					//signingService: '',
					signingServiceId: '',
					//releaseDate: '',
					//signContent: '',
					name: '',
					idCard: '',
					bankCardAccount: '',
					idCardZm: '',//身份证正面
					idCardFm: '',//身份证反面
				},
				userInfo: {
					avatarUrl: '',
					nickName: '',
					phone: ''
				},
				pickerIndex: 0,
				pickerArray: ['银行卡'],
				agreement: false, //同意协议
			}
		},
		onLoad(e) {
			if(!e.memberInfo){
				uni.showToast({title: "数据错误！",icon: "none",mask: true,});
				return;
			}
			this.formData = JSON.parse(decodeURIComponent(e.memberInfo));
			// console.log("==3=formData===：",JSON.stringify(this.formData));
			// 获取本地存储的用户信息
			let userInfo = uni.getStorageSync('ys_user_info');
			if(userInfo){
				this.userInfo = JSON.parse(userInfo);
				this.formData.phone = this.userInfo.phone;
			}else{//重新授权
				let params = '/signingPages/uplouIdCard?memberInfo=' + e.memberInfo;
				uni.reLaunch({
					url: '/signingPages/authorization?pages=' + encodeURIComponent(JSON.stringify(params))
				});
			}
		},
		methods: {
			changeAgreement() {
				this.agreement = !this.agreement;
			},
			confirmAgreement() {
				if (!this.agreement) {
					uni.showModal({
						title: '提示',
						content: '请先阅读并同意《用户服务协议和隐私政策》！',
						showCancel:false
					});
					return false;
				}
				if (!this.formData.idCardZm) {
					uni.showToast({title: "请上传身份证正面照！",icon: "none",mask: true,});
					return;
				}
				if (!this.formData.idCardFm) {
					uni.showToast({title: "请上传身份证反面照！",icon: "none",mask: true,});
					return;
				}
				if(!this.formData.name){
					uni.showToast({title: "请输入真实姓名！",icon: "none",mask: true,});
					return;
				}
				if(!this.formData.idCard){
					uni.showToast({title: "请输入身份证号！",icon: "none",mask: true,});
					return;
				}else{
					let age = this.getAge(this.formData.idCard);
					if(age < 16 || age > 65){
						uni.showToast({title: "身份证年龄不符合报税要求(16-65岁)",icon: "none",mask: true,});
						return;
					}
				}
				if (!this.formData.bankCardAccount) {
					uni.showToast({title: "请输入本人收款账户！",icon: "none",mask: true,});
					return;
				}

				uni.showLoading({title: '请稍后...',mask: true})
				this.$requestApi.addMember(this.formData).then(res => {
					uni.hideLoading();
					if(res.success){
						this.formData.memberId = res.result;
						uni.reLaunch({
							url: '/signingPages/writeSignature?memberInfo=' + encodeURIComponent(JSON.stringify(this.formData))
						});
					}else{
						uni.showToast({title: res.message,icon: "none",mask: true,});
						return;
					}
				});
			},
			
			// 上传
			sfz_chagne(e) {
			    if (e.name == "obverse") {
			        this.formData.idCardZm = e.uploudPath
			    } else if (e.name == "reverse") {
			        this.formData.idCardFm = e.uploudPath
			    }
			},
			// 删除
			del_btn(e) {
			    if (e.name == "obverse") {
			        this.formData.idCardZm = ""
			    } else if (e.name == "reverse") {
			        this.formData.idCardFm = ""
			    }
			},
			//根据身份证号获取年龄
			getAge(identityCard) {
			    var len = (identityCard + "").trim().length;
			    if (len == 0) {
			        uni.showToast({title: "身份证号格式错误！",icon: "none",mask: true,});
			        return;
			    } else {
			        if ((len != 15) && (len != 18)) //身份证号码只能为15位或18位其它不合法
			        {
						uni.showToast({title: "身份证号格式错误！",icon: "none",mask: true,});
			            return;
			        }
			    }
			    var strBirthday = "";
			    if (len == 18) //处理18位的身份证号码从号码中得到生日和性别代码
			    {
			        strBirthday = identityCard.substr(6, 4) + "/" + identityCard.substr(10, 2) + "/" + identityCard.substr(12, 2);
			    }
			    if (len == 15) {
			        strBirthday = "19" + identityCard.substr(6, 2) + "/" + identityCard.substr(8, 2) + "/" + identityCard.substr(10, 2);
			    }
			    //时间字符串里，必须是“/”
			    var birthDate = new Date(strBirthday);
			    var nowDateTime = new Date();
			    var age = nowDateTime.getFullYear() - birthDate.getFullYear();
			    //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
			    if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
			        age--;
			    }
			    return age;
			},
			goBack(e){
				uni.reLaunch({
					url: '/signingPages/confirmAgreement?memberInfo=' + encodeURIComponent(JSON.stringify(this.formData))
				});
			},
			backIndex(e){
				uni.reLaunch({
					url: '/pages/index'
				});
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
			margin-top: -230rpx;
		}
	}

	/* 页面 end*/

	/* 分割线 start*/
	.tableTitle {
		position: relative;
		margin: 0 auto;
		width: 92%;
		height: 1px;
		background-color: #d4d4d4;
		text-align: center;
		font-size: 16px;
		color: rgba(101, 101, 101, 1);
	}

	.midText {
		position: absolute;
		left: 50%;
		background-color: #ffffff;
		padding: 0 15px;
		transform: translateX(-50%) translateY(-50%);
	}

	/* 分割线 end*/
</style>
